<template lang="pug">
    div.information
        div(v-for="(item,index) in informationList" :key='index').information-box
            h3 {{item.title}}
            img(v-for="part in item.imageURL" :src="part.img")
            p
                span {{item.whichWay}}
                span {{item.getTime}}
</template>

<script>
	export default {
		name: "information",
		data() {
			return {
				informationList: []
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.requestData();
			})
		},
		methods: {
			// 请求数据
			requestData() {
				this.$http.get('https://www.easy-mock.com/mock/5b0e9bffed71ea4dc4c171de/vue-baidu-phone/').then((s) => {
					console.log(s.data.data.information);
					//将数据传入data的数据流中
					this.getData(s.data.data.information);
				}).catch((s) => {
					console.log(s)
				})
			},
			// 将第一次请求数据 加载到 data数据流中
			getData(informationList) {
				this.informationList = informationList;
			}
		}
	}
</script>

<style scoped lang="stylus">
    .information
        padding 0.3rem
        text-align left
        .information-box
            margin 0.3rem 0
            border-bottom 0.026666667rem solid #ddd
            &:last-child
                border-bottom none
            img
                width 3.04rem
                height: 2rem
                padding 0.26666666667rem 0.04rem
            h3
                font-weight 400
                font-size: 0.48rem;
                line-height: 0.6933333333333rem;
            p
                font-size: 0.34666666666667rem;
                color: #999;
                margin-bottom 0.2rem
                span
                    margin-right 0.2666666666667rem
</style>
